<template>
    <CardBox title="客户投放案例（近半年）" class="launch-case-box">
        <div class="tabs-box">
            <div class="box">
                <Tabs
                    v-model:active="activeTab" line-width="30" title-active-color="#E60044"
                    title-inactive-color="#848484" :ellipsis="false" @change="tabChange"
                >
                    <Tab v-for="(item, index) in list" :key="index" :title="item.name" :name="item.code"></Tab>
                </Tabs>
            </div>
            <div class="right-icon">
            </div>
            <div class="menu-icon-box">
                <Popover v-model:show="showPopover" placement="bottom-end" theme="light" show-arrow>
                    <div class="tag-box">
                        <div
                            v-for="(item, index) in list" :key="index + 'pop'" class="tag-item"
                            :class="{ 'active': activeTab == item.code }" @click="tabChange(item.code || '')"
                        >
                            {{ item.name }}
                        </div>
                    </div>
                    <template #reference>
                        <img class="menu-icon" src="@/assets/img/tabsmenu.png" />
                    </template>
                </Popover>
            </div>
        </div>
        <div class="tab-content">
            <Grid column-num="3" :border="false" :center="false">
                <template v-for="(item, index) in videoList" :key="index">
                    <GridItem v-if="item.coverImgUrl" use-slot @click="toPreview(item.viewUrl)">
                        <ThirdScreen v-if="checkScreenType(item) === 3" :item="item" />
                        <DoubleScreen v-if="checkScreenType(item) === 2" :item="item" />
                        <SingleScreen v-if="checkScreenType(item) === 1" :item="item" />
                    </GridItem>
                </template>
            </Grid>
            <div class="more-box" @click="loadMore">
                <span v-if="!finished">点击加载更多 <img src="@/assets/img/arrow.png" /></span>
                <span v-else>没有更多了~</span>
            </div>
        </div>
    </CardBox>
</template>

<script lang="ts"  setup>
import { ref, watch, PropType } from 'vue';
import { Tab, Tabs, Grid, GridItem, Popover } from 'vant';
import CardBox from './components/CardBox.vue';
import { useRouter } from 'vue-router';
import { getCasesList } from '@/api/onePage';
import SingleScreen from './components/Screen/SingleScreen.vue';
import DoubleScreen from './components/Screen/DoubleScreen.vue';
import ThirdScreen from './components/Screen/ThirdScreen.vue';
import { ListItem } from './components/Ranking.vue';
import { PremisesCaseItem } from './onePage.module';

const props = defineProps({
    tradeCode: {
        type: String,
        require: true,
        default: '',
    },
    premiseId: {
        type: String,
        require: true,
        default: '',
    },
    list: {
        type: Array as PropType<ListItem[]>,
        require: true,
        default: () => [],
    },
});

const showPopover = ref(false);
const pageNum = ref(1);
const pageSize = ref(9);
const activeTab = ref('');
const videoList = ref<PremisesCaseItem[]>([]);
const router = useRouter();
const finished = ref(false);

const toPreview = async (path?: string) => {
    if (!path) {
        return false;
    }
    await router.push({
        path: '/one_page/preview',
        query: {
            url: path
        }
    });
};

const initData = async (isInit?:boolean)=>{
    if(!props.premiseId || !props.tradeCode){
        return;
    }
    if(isInit){
        pageNum.value = 1;
        finished.value = false;
    }
    const res = await getCasesList({
        projectId: props.premiseId,
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        tradeCode: activeTab.value
    });
    if (!res) {
        return false;
    }
    if(pageNum.value === 1){
        videoList.value = res.pageEntity?.data || [];
    }else{
        videoList.value = videoList.value.concat(res.pageEntity?.data || []);
    }
    if (videoList.value.length >= res.pageEntity?.totalSize || !res.pageEntity?.data?.length) {
        finished.value = true;
    }
};

const checkScreenType = (item: PremisesCaseItem)=>{
    let type = 1;
    if(item.bottom1ImgUrl && item.bottom2ImgUrl){
        type = 3;
    }else if(item.bottomImgUrl){
        type = 2;
    }
    return type;
};

const loadMore = async()=>{
    pageNum.value++;
    await initData();
};

const tabChange = async (code: string) => {
    activeTab.value = code;
    showPopover.value = false;
    await initData(true);
};

watch(
    () => props.tradeCode,
    async (newVal) => {
        activeTab.value = newVal;
        await initData(true);
    }
);
</script>

<style>
:root {
    --van-tab-font-size: 15px;
    --van-tabs-line-height: 40px;
    --van-grid-item-content-padding: 10px 0;
}
</style>

<style lang="scss" scoped>
.tabs-box {
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    padding-right: 25px;
    width: 100%;
    .box {
        width: 100%;
    }
}

.tag-box {
    max-width: 85vw;
    padding: 0 10px;
    padding-bottom: 10px;

    .tag-item {
        width: 82px;
        height: 30px;
        line-height: 30px;
        padding: 0 5px;
        background: #f8f8f8;
        border-radius: 6px;
        display: inline-block;
        font-family: PingFangSC-Regular, sans-serif;
        font-weight: 400;
        font-size: 13px;
        color: #333333;
        margin-right: 12px;
        margin-top: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;

        &.active {
            background: #e600440f;
            color: #e60044;
        }
    }
}

.right-icon {
    text-align: right;
    width: 70px;
    height: 14px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-image: linear-gradient(90deg, #ffffff00 1%, #ffffff 70%);
    pointer-events: none;
}

.menu-icon-box {
    width: 14px;
    height: 14px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.menu-icon {
    width: 14px;
    height: 14px;
}

.launch-case-box {
    padding-bottom: 12px;
    :deep(.content) {
        padding: 13px 0;
    }

    :deep([class~="van-tabs__nav"]) {
        padding-left: 0;
    }
}

.more-box {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFangSC-Regular, sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #848484;
    margin: auto;
    span {
        height: 22px;
        line-height: 22px;
        display: inline-block;
        padding: 0 10px;
        background: #f8f8f8;
        border-radius: 11px;
    }

    img {
        width: 8px;
        height: 8px;
        margin-left: 4px;
    }
}
:deep(.content) {
    margin-top: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
</style>
